<template>
<Card>
  <p slot="title"><Icon type="md-search"></Icon>筛选搜索</p>
  <div slot="extra">
    <Button shape="circle" type="primary" icon="md-search" @click="onSearch">{{$t('search')}}</Button>
    <Button shape="circle" icon="md-sync" @click="onReset">{{$t('reset')}}</Button>
  </div>
  <Form ref="searchForm" :model="form" label-position="right" :label-width="100">
    <Row type="flex">
      <Col>
      <FormItem label="登录名" prop="userName">
        <Input v-model="form.userName" placeholder=""></Input>
      </FormItem>
      </Col>
      <Col>
      <FormItem label="姓名" prop="realName">
        <Input v-model="form.realName" placeholder=""></Input>
      </FormItem>
      </Col>
      <Col>
      <FormItem label="手机号" prop="mobilePhone">
        <Input v-model="form.mobilePhone" placeholder=""></Input>
      </FormItem>
      </Col>
      <Col>
      <FormItem label="是否锁定" prop="isLocked">
        <RadioGroup v-model="form.isLocked">
            <Radio :label="1">是</Radio>
            <Radio :label="0">否</Radio>
        </RadioGroup>
      </FormItem>
      </Col>
    </Row>
  </Form>
</Card>
</template>
<script>
export default {
  props: {
    params: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      form: {
        userName: '',
        realName: '',
        mobilePhone: '',
        isLocked: 1
      },
      rule: {
        userName: [
          { required: true, message: '登录名不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '确认密码不能为空', trigger: 'blur' }
        ],
        realName: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        mobilePhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' }
        ],
        telephone: [
          { required: false, message: '联系电话不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  mounted () {
    // this.form = this.model
  },
  methods: {
    onSearch () {
      this.$emit('on-search', this.form)
    },
    onReset () {
      this.$refs['searchForm'].resetFields()
    }
  }
}
</script>
